<template>
  <card :showDivider="false">
    <div class="flex" style="margin-top: -30px">
      <div>
        <span class="label">总支出额：</span>
        <span class="value">{{ unitVal(total?.feeAmount, '元') }}</span>
      </div>
      <div class="ml-32">
        <span class="label">已付款金额：</span>
        <span class="value">{{ unitVal(total?.payAmount, '元') }}</span>
      </div>
    </div>
    <a-divider />
    <table-index :table="table" @loadData="loadData">
      <template #code="{ record }">
        <div class="order-info-item">
          <div>{{ record.code }}</div>
        </div>
        <!-- 订单标签 -->
        <a-space wrap>
          <tag type="primary" v-for="(item, index) in record.labelList" :key="index">{{ item }}</tag>
        </a-space>
      </template>
      <!-- 关联工单号 -->
      <template #businessCode="{ record }">
        <a-link v-if="record.workCode" @click="() => onClickWorkorder(record)">{{ record.workCode }}</a-link>
        <div v-else>-</div>
      </template>
      <!-- 审批状态 -->
      <template #checkStatus="{ record }">
        <div :class="['checkStatus_' + record.checkStatus]">{{ record.checkStatusName }}</div>
        <!-- 驳回 -->
        <a-tag style="cursor: pointer" bordered color="blue" v-if="record.checkStatus == 6" @click="showReason(record)">原因</a-tag>
      </template>
      <!-- 审批流 -->
      <template #checkFlowList="{ record }">
        <!-- 无需审批显示- -->
        <div v-if="record.checkStatus == 1">-</div>
        <template v-else>
          <div v-for="(item, index) in record.checkFlowList" :key="index">
            <div v-if="item.staffId">
              <span class="fixed_width">{{ item.staffName || '-' }} </span>|
              <span :class="['checkStatus_' + item.status]">{{ item.statusName || '-' }}</span>
              <div class="td-divider" v-if="index != record.checkFlowList.filter((i) => i.staffId).length - 1"></div>
            </div>
          </div>
        </template>
      </template>
      <!-- 关联业务信息 -->
      <template #orderInfo="{ record }">
        <div v-if="record.workCode">
          <div class="order-info-item">
            {{ record.workTypeName }}
          </div>
          <div class="order-info-item link">
            {{ record.workCode }}
          </div>
        </div>
        <div class="td-divider" v-if="record.workCode && record.businessCode"></div>
        <div v-if="record.businessCode">
          <div class="order-info-item">
            {{ record.businessTypeName }}
          </div>
          <div class="order-info-item link">
            {{ record.businessCode }}
          </div>
        </div>
      </template>
      <!-- 付款状态 -->
      <template #payStatusName="{ record }">
        <span :class="['payStatus_' + record.payStatus]">{{ record.payStatusName || '-' }}</span>
      </template>
      <!-- 支出费项 -->
      <template #feeList="{ record }">
        <template v-for="(item, index) in record.feeList" :key="index">
          {{ item.itemName }}
          <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
        </template>
      </template>
      <!-- 费用金额 -->
      <template #feeAmount="{ record }">
        <div v-for="(item, index) in record.feeList" :key="index">
          <span> {{ item.amount }} </span>
          <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
        </div>
      </template>
      <!-- 车辆信息 -->
      <template #carInfo="{ record }">
        <template v-for="(item, index) in record.feeList" :key="index">
          <div class="flex">
            <div class="carLicenseNo">{{ item.carId ? `${item.licenseNo}` : '-' }}</div>
            <a-tooltip v-if="item.carId" :content="`${item.licenseNo} ${item.carModel}`" position="top" mini>
              <img src="@/assets/view-icon.png" class="carInfo_img" />
            </a-tooltip>
          </div>
          <div class="td-divider" v-if="index != record.feeList.length - 1"></div>
        </template>
      </template>
      <!-- 付款时间 -->
      <template #payTime="{ record }">
        <span>{{ record.payTime || '-' }}</span>
      </template>
    </table-index>
  </card>

  <!-- 原因弹框 -->
  <ReasonModal ref="reasonModalRef" />
</template>

<script setup lang="ts">
  import ReasonModal from '@/views/business/operate-cost/components/reason-modal.vue'

  import { getCostListApi } from '@/api/business/operateCost'
  import { getOperateCost } from '@/api/order/sOrder'

  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { unitVal } from '@/utils'
  import { ref, onMounted, reactive } from 'vue'
  import { usePermission } from '@/hooks/usePermission'
  import useNavigate from '@/hooks/useNavigate'

  const props = defineProps({
    orderId: Number,
    type: Number,
  })

  const { navigateTo } = useNavigate()

  const queryParam = reactive<any>({})

  // 展示原因弹框
  const reasonModalRef = ref()
  const showReason = (record: any) => {
    reasonModalRef.value.open(record)
  }

  // table 配置
  const table = useTable({
    columns: [
      { title: '支出单号', slotName: 'code', width: 180, fixed: 'left' },
      { title: '关联工单号', slotName: 'businessCode', width: 210 },
      { title: '费用产生机构', dataIndex: 'feeOrgName', ellipsis: true },
      { title: '支出单类型', dataIndex: 'costTypeName', width: 110 },
      { title: '支出总额', dataIndex: 'amount', unit: '元', width: 120 },
      { title: '支出费项', slotName: 'feeList', width: 120 },
      { title: '费用金额', slotName: 'feeAmount', unit: '元', width: 120 },
      { title: '车辆信息', slotName: 'carInfo', width: 120 },
      { title: '申请人', dataIndex: 'applyStaffName', width: 120 },
      { title: '审批流', slotName: 'checkFlowList', width: 160 },
      { title: '申请时间', dataIndex: 'applyTime', width: 180 },
      { title: '审批状态', slotName: 'checkStatus', width: 100 },
      { title: '付款状态', slotName: 'payStatusName', width: 100 },
      { title: '付款时间', dataIndex: 'payTime', width: 180 },
      { title: '申请备注', dataIndex: 'remark', ellipsis: true },
    ],
    bordered: {
      wrapper: true,
      cell: true,
    },
    tableLoading: false,
  })

  const loadData = (page?: number) => {
    const fn = useFetchTableDataApi(table, queryParam, getCostListApi)
    fn(page).then((res: any) => {
      // 过滤掉审批流程没有审批人的
      res.data?.forEach((item: any) => {
        item.checkFlowList = item.checkFlowList.filter((item: any) => item.staffId)
      })
    })
  }

  const total = ref()
  const getOperateCostData = async (businessId: number, businessType: number) => {
    const res = await getOperateCost({ businessId, businessType })
    total.value = res.result
  }

  const onClickWorkorder = (record: any) => {
    if (usePermission('svms:business:workOrder:work.details')) {
      navigateTo(
        `/work-order/detail/${record.workId}?tab=1&orderId=${record.businessId}&workCode=${record.workCode}&orderType=${record.businessType}`,
        `${record.workCode}-工单详情`
      )
    }
  }

  onMounted(() => {
    queryParam.businessId = props.orderId
    queryParam.businessType = props.type
    loadData()
    getOperateCostData(props.orderId!, props.type!)
  })
</script>

<style lang="less" scoped>
  .label {
    font-weight: 400;
    font-size: 14px;
    color: #4e5969;
  }
  .value {
    font-weight: 400;
    font-size: 14px;
    color: #1d2129;
  }
  .fixed_width {
    min-width: 46px;
    padding-right: 4px;
    display: inline-block;
  }
  .checkStatus {
    &_1 {
      color: #722ed1;
    }
    &_2 {
      color: #ff7d00;
    }
    &_3 {
      color: #1890ff;
    }
    &_4 {
      color: #00b42a;
    }
    &_5 {
      color: #86909c;
    }
    &_6 {
      color: #f76964;
    }
    &_7 {
      color: #f76964;
    }
  }

  .payStatus {
    &_0 {
      color: #ff7d00;
    }
    &_1 {
      color: #00b42a;
    }
  }

  .link {
    color: #1890ff;
  }

  .padding-top-0 {
    padding-top: 0;
  }
  .padding-bottom-0 {
    padding-bottom: 0;
  }
  .border-none {
    &::before {
      content: none !important;
    }
  }
  .checkSwitch {
    span {
      margin-right: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 4px;
  }
  .staffText {
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fixed_width {
    min-width: 46px;
    padding-right: 4px;
    display: inline-block;
  }
  .carLicenseNo {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .carInfo_img {
    height: 16px;
    width: 16px;
    margin: 2px;
  }
</style>
